<template>
    <div class="equity">

        <el-card shadow="never" class="card-com" style="margin-top: 10px;">
            <div class="card-1">
                <searchPanel @refresh="getData('reset')" @changePanel="resizeWin">
                    <!-- 查询面板 -->
                    <template v-slot:search>
                        <el-form :inline="true" :model="listSearch" class="demo-form-inline" label-width="120px">
                            <el-row :gutter="20">
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="立减金名称">
                                        <NormalInput v-model:model-value="listSearch.condition.reductionVoucherName"
                                            @get-data="getData('search')"></NormalInput>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="立减金编码">
                                        <NormalInput v-model:model-value="listSearch.condition.reductionVoucherCode"
                                            @get-data="getData('search')"></NormalInput>
                                    </el-form-item>
                                </el-col>

                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="立减金额度">
                                        <!-- <NormalInput v-model.number="listSearch.condition.reductionVoucherAmount"
                                            @get-data="getData('search')"></NormalInput> -->
                                        <el-input-number style="width: 100%;" @keyup.enter.native="getData('search')"
                                            @clear="getData('search')"
                                            v-model.number="listSearch.condition.reductionVoucherAmount" clearable
                                            placeholder="请输入立减金额度" :min="0" :precision="2" :controls="false" />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="立减金类型">
                                        <MySelect v-model:select-value="listSearch.condition.reductionVoucherTypeList"
                                            :multiple="true" @myChange="getData('search')"
                                            :options="reductionVoucherType"></MySelect>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="供应商立减金编码">
                                        <NormalInput
                                            v-model:model-value="listSearch.condition.supplierReductionVoucherCode"
                                            @get-data="getData('search')"></NormalInput>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="供应商编码">
                                        <el-select v-model="listSearch.condition.supplierCode" style="width:100%"
                                            @change="getData('search')" placeholder="请选择供应商编码" filterable clearable>
                                            <el-option v-for="item in listCollect.supplierList" :key="item.id"
                                                :value="item.key" :label="item.key"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row justify="end">
                                <el-button type="primary" @click="getData('search')">查询</el-button>
                                <el-button @click="getData('reset')">重置</el-button>
                            </el-row>
                        </el-form>
                    </template>
                    <!-- 字段添加 -->
                    <template v-slot:edit>
                        <!-- v-permission="'BLACK_LIST:CREATE-EDIT'" -->
                        <el-button :icon="Plus" type="primary" @click="AddEdit('add')"></el-button>
                        <DropItem v-model:table-prop="tableProp"></DropItem>
                    </template>
                </searchPanel>
            </div>
            <div class="card-2">
                <!-- table数据 -->
                <OnlyTable class="card-2" :tableProps="tableProp" :pageTotal="pageParams.total" @get-page="handPage"
                    :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight"
                    :loading="pageParams.loadIng">
                    <template #extInfo="scope">
                        {{ scope.row.extInfo == "{}" ? "" : scope.row.extInfo }}
                    </template>
                    <template #handle="scope">
                        <el-button type="primary" size="small" link @click="detailBtn(scope.row)">查看</el-button>
                        <el-button type="primary" size="small" link @click="quotaBtn(scope.row)">修改配额</el-button>
                        <el-button type="primary" size="small" link @click="AddEdit('edit', scope.row)">编辑</el-button>
                        <el-button type="primary" size="small" link @click="lookInventory(scope.row)">查库存</el-button>
                        <el-button type="danger" size="small" link @click="delBtn(scope.row)">删除</el-button>
                    </template>
                </OnlyTable>
            </div>
        </el-card>
        <addAndEditVue ref="addEditRef" @refresh="getData('reset')" :supplierCodeList="listCollect.supplierList">
        </addAndEditVue>
        <FormDetail ref="detailRef" :detailData="detailData" :labelWidth="140"></FormDetail>
        <quota ref="quotaRef" @refresh="getData('reset')"></quota>
        <inventory ref="inventoryRef"></inventory>
    </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { onMounted, ref, nextTick, onUnmounted, defineAsyncComponent } from 'vue';
import { Search, Plus, Refresh, Download } from '@element-plus/icons-vue'

import _ from "lodash"
import { useComListData } from "@/store/list"
import { equityListStore } from "./pageStore"
import { equityDetailGet } from "@/api/equity"
import { useEnumStore } from '@/store/enumeration';
const { reductionVoucherType } = useEnumStore()

const { listCollect, getSupplierAllList } = useComListData()
const addAndEditVue = defineAsyncComponent(() => import("./components/addAndEdit.vue"))
const quota = defineAsyncComponent(() => import("./components/quota.vue"))
const inventory = defineAsyncComponent(() => import("./components/inventory.vue"))
const { detailData, tableProp, listSearch, pageParams, detailRef, quotaRef, inventoryRef } = storeToRefs(equityListStore())
const { getDate1, handPage, delBtn, detailBtn, quotaBtn, lookInventory } = equityListStore()
const addEditRef = ref<{ show: (type: string, row?: any) => void }>()

const AddEdit = async (type: string, row?: any) => {
    if (type == 'add') {
        addEditRef.value?.show('add')
    } else {
        const res = await equityDetailGet({ id: row.id })
        res.data.reductionVoucherType = res.data.reductionVoucherType + ''
        // res.data.expiryPeriodType = res.data.expiryPeriodType + ''
        addEditRef.value?.show('edit', res.data)
    }
}


onMounted(() => {
    getDate1('reset')
    nextTick(() => {
        const dom1 = document.querySelector(".card-1") as any;
        const dom2 = document.querySelector(".card-com") as any;
        if (dom2) {
            const height = dom2.offsetHeight - dom1.offsetHeight - 70;
            pageParams.value.tableHeight = height;
        }
    })
    window.addEventListener('resize', resizeWin)
    getSupplierAllList(3)
})
onUnmounted(() => {
    window.removeEventListener('resize', resizeWin)
})
const resizeWin = _.debounce(() => {
    const dom1 = document.querySelector(".card-1") as any;
    const dom2 = document.querySelector(".card-com") as any;
    if (dom2) {
        const height = dom2.offsetHeight - dom1.offsetHeight - 70;
        pageParams.value.tableHeight = height;
    }
}, 200)
const getData = (type: string) => {
    getDate1(type)
}
</script>

<style scoped lang="scss">
.equity {
    height: calc(100vh - 136px);
    .card-com {
        display: flex;
        flex-direction: column;
        // height: 100%;

        .card-2 {
            flex-grow: 1;
        }
    }
}
</style>